<template>
    <view class="video-box" :style="themeColor">
        <video
            class="myVideo"
            :src="easyGetImgUrl(data.VideoUrl)"
            loop="true"
            controls="false"
            autoplay="true"
            object-fit="contain">
            <!-- 后退 -->
            <view class="back-btn" @click="back"></view>
            <!-- 按钮区 -->
            <view class="btn-box">
                <button class="btn-box-content" open-type="share" plain>
                    <view class="iconfont icon-transmit"></view>
                    <iconsfont customIcons="icon-zhuanfa" :color="'#ffffff'" size="36"></iconsfont>
                </button>
                <button class="btn-box-content" @click="saveVideo" plain>
                    <uni-icons type="download" :color="'#ffffff'" size="36"></uni-icons>
                </button>
            </view>
            <!-- 详情  -->
            <view class="detail-box">
                <view class="item-head">
                    <image class="head-img" :src="easyGetImgUrl(data.HeadImage)"> </image>
                    <view class="head-name">{{ data.NickName || data.RealName }}</view>
                </view>
                <view class="video-content" v-if="data.Content">{{ data.Content }}</view>
            </view>
        </video>
		<privacy-agreement></privacy-agreement>
    </view>
</template>

<script>
import privacyAgreement from "@/components/privacy-agreement/privacy-agreement.vue"
import { GetMoment } from "@/service/api/moment.js"
import storage from "@/uni-sub-base/utils/storage.js"
export default {
	components: {
		privacyAgreement
	},
    data() {
        return {
            id: "",
            data: {},
        }
    },
    onLoad(e) {
        this.id = e.id
    },
    mounted() {
        this.detail()
    },
    onShareAppMessage(res) {
        var that = this
        let imageUrl
        let url
		let userInfo = storage.getCache("userInfo")
        if (res.from === "button") {
            // 来自页面内分享按钮
            url = "/pages_me/packet/moment/moment_video?id=" + this.data.ID+"&tel="+userInfo.Tel
            imageUrl = this.easyGetImgUrl(this.data.VideoImgSrc)
            return {
                imageUrl: imageUrl,
                title: this.data.Content,
                path: url,
                success(resp) {},
            }
        }
    },
    methods: {
        detail() {
            GetMoment({ id: this.id }).then((res) => {
                if (res.State) {
                    this.data = res.Data
                }
            })
        },
        back() {
            this.easyGoBack()
        },
        saveVideo() {
            let path = this.easyGetImgUrl(this.data.VideoUrl)
            uni.downloadFile({
                //getVideoInfo
                url: path, //src: path
                success: function (res) {
                    uni.saveVideoToPhotosAlbum({
                        filePath: res.tempFilePath,
                        success: () => {
                            uni.showToast({
                                title: "保存成功！",
                            })
                        },
                        fail: (error) => {
                            uni.showToast({
                                icon: "none",
                                title: "保存失败",
                            })
                        },
                    })
                },
            })
        },
    },
}
</script>

<style lang="scss" scoped>
.video-box {
    width: 100vw;
    height: 100vh;
    position: relative;
}

.myVideo {
    width: 100%;
    height: 100%;
}

.back-btn {
    position: absolute;
    left: 24rpx;
    top: 60rpx;
    width: 60rpx;
    height: 60rpx;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.2);
}

.back-btn:before {
    content: "";
    position: absolute;
    height: 20rpx;
    width: 20rpx;
    top: 18rpx;
    left: 22rpx;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg);
}

.btn-box {
    position: absolute;
    bottom: 234rpx;
    right: 40rpx;
    color: #fff;
    text-align: center;
}

.btn-box-content {
    margin-top: 50rpx;
}

button.btn-box-content {
    border: #fff;
    background: #000;
    color: #fff;
    line-height: 1.6;
}

.btn-box-content .iconfont {
    font-size: 36rpx;
}

.btn-number {
    font-size: 22rpx;
}

.detail-box {
    position: absolute;
    width: 100%;
    box-sizing: border-box;
    bottom: 80rpx;
    padding: 0 30rpx;
}

.item-head {
    display: flex;
    align-items: center;
}

.head-img {
    height: 72rpx;
    width: 72rpx;
    margin-right: 20rpx;
    overflow: hidden;
    border-radius: 50%;
}

.head-name {
    font-size: 32rpx;
    font-weight: bold;
    color: #fff;
    padding-right: 20rpx;
}

.mini-btn {
    margin: 0;
    color: #fff;
    font-size: 24rpx;
    line-height: 42rpx;
    padding: 0 34rpx;
    border-radius: 21rpx;
}

.video-content {
    color: #fff;
    font-size: 26rpx;
    line-height: 40rpx;
    padding-top: 20rpx;
    overflow: hidden;
    text-overflow: -o-ellipsis-lastline;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.share-box {
    position: fixed;
    bottom: 0;
    width: 100%;
    background: #fff;
}

.item-box {
    display: flex;
    justify-content: space-around;
}

.img-box {
    text-align: center;
    padding: 32rpx 0;
}

.share-img {
    width: 88rpx;
    height: 88rpx;
}

.share-tle,
.cancle-btn {
    font-size: 26rpx;
    color: #666;
}

.cancle-btn {
    text-align: center;
    padding: 33rpx 0;
}
</style>
